<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>

    <style>
      .active {
        color: red;
        font-weight: bold;
      }
    </style>
  </head>
  <body>
    <!-- 
      组件的事件声明：（Vue3新增的一个 emits 选项）

        emits 选项的作用是：
          用于声明我组件内会触发的自定义事件有哪些

        emits 语法：
          1. emits: [xx事件，xx事件]
          2. emits: {
              key: value
          }
              key - 表示事件名字 eventName
              value - null 或者一个 校验事件参数的函数

        emits 声明的好处：
          1. 在调用 $emit() 时可以有代码提示（借助脚手架工具）
          2. 能避免自定义事件名与普通事件重名时，触发两次的问题
            NOTE: 该问题出现的原因是啥？需要往后看 attribultes 


     -->
    <div id="app"></div>

    <script src="../lib/vue-3.js"></script>
    <script>
      const Person = {
        template: `
          <div>
            <p>姓名：{{ username }}</p> 
            <hr />
            <button @click="fn1">修改 username</button>
          </div>
        `,
        // 声明会收到哪些 prop 数据
        props: ["username"],
        // 声明会触发哪些自定义事件
        // emits: ["change"],
        emits: {
          // change: null, // 表示不校验

          change(payload) {
            // payload 就是触发该change事件时，传递的 payload 参数
            // 通过返回 boolean 来控制校验成功与否

            return payload === "zhangsan";
          },
        },
        methods: {
          fn1() {
            this.$emit("change", "里斯");
          },
        },
      };

      const Button = {
        template: `
          <div>
            <button @click="$emit('click')">点我</button>  
          </div>
        `,

        // 没有声明的话，下面 fn1 函数，会触发两次
        // emits: ["click"],
      };

      const app = Vue.createApp({
        template: `  
          <person :username="name" @change="handleChange"></person>

          <my-button @click="fn1"></my-button>
        `,
        data() {
          return {
            name: "张三",
          };
        },

        methods: {
          handleChange(payload) {
            // console.log("handleChange");
            this.name = payload;
          },

          fn1(event) {
            console.log("fn1", event);
          },
        },
      });

      app.component("person", Person);
      app.component("my-button", Button);

      app.mount("#app");
    </script>
  </body>
</html>
